<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>数据统计</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <link
      rel="stylesheet"
      href="../../layuiadmin/layui/css/layui.css"
      media="all"
    />
    <link
      rel="stylesheet"
      href="../../layuiadmin/style/admin.css"
      media="all"
    />
  </head>
  <body>
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-body">
              <blockquote class="layui-elem-quote">
                欢迎使用:{:env('app.name')}系统
              </blockquote>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <!-- <body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            累计下单量[含待服务、服务中和已完成]
            <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{$data.order_allcount|default=0}单</p>
            <hr />
            <p>
              今日下单量
              <span class="layuiadmin-span-color">{$data.order_todaycount|default=0}单</span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            累计完成量[含已完成]
            <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{$data.order_allfinish|default=0}单</p>
            <hr />
            <p>
              今日完成量
              <span class="layuiadmin-span-color">{$data.order_todayfinish|default=0}单</span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            累计完成金额[含已完成，不扣除平台抽成]
            <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{$data.order_alltotal|default=0}元</p>
            <hr />
            <p>
              今日完成金额
              <span class="layuiadmin-span-color">{$data.order_todaytotal|default=0}元</span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            累计售后订单量
            <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{$data.order_alltotals|default=0}单</p>
            <hr />
            <p>
              售后中订单量
              <span class="layuiadmin-span-color">{$data.order_todaytotals|default=0}单</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <form class="layui-form layui-form-pane form-search">
            <div class="layui-card layui-form" lay-filter="component-form-element">
              <div class="layui-card-header">营业时间</div>
              <div class="layui-card-body layui-row layui-col-space8">
                <div class="layui-col-md12">
                  <input type="text" id="test" name="fwtime" autocomplete="off" class="layui-input" placeholder=""
                    value="{:input('get.fwtime')}">
                </div>
              </div>
              <div class="layui-card-header">
                <div class="layui-form-item layui-inline">
                  <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="sreach">搜索</button>
                </div>
              </div>
            </div>
          </form>
          <div class="layui-card-header">日订单量数据</div>
          <div class="layui-card-body">
            <div id="container" style="height: 500px"></div>
          </div>
          <div class="layui-card-body">
            <div id="container2" style="height: 500px"></div>
          </div>
        </div>
      </div>
    </div>
    {include file="public/footer"}
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script>
      layui.use(['layer', 'jquery', 'form', 'laydate'], function () {
        $ = layui.jquery;
        var form = layui.form
          , laydate = layui.laydate
          , layer = layui.layer;
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var option;
        var dom2 = document.getElementById("container2");
        var myChart2 = echarts.init(dom2);
        var option2;
        laydate.render({
          elem: '#test'
          , type: 'date'
          , range: '~'
        });
        //监听提交
        form.on('submit(add)', function (data) {
          $.ajax({
            type: 'post',
            data: data.field,
            success: function (res) {
              if (res.code == 0) {
                layer.msg(res.msg, { icon: 6, time: 1000 }, function () {
                  // 获得frame索引
                  var index = parent.layer.getFrameIndex(window.name);
                  parent.location.reload();
                  parent.layer.close(index);
                });
              } else {
                layer.msg(res.msg, { icon: 2, time: 1000 });
              }
            }
          });
          return false;
        });
      });
      var time = $("input[name='fwtime']").val();
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var app = {};
      var option;
      var dom2 = document.getElementById("container2");
      var myChart2 = echarts.init(dom2);
      var option2;
      //发异步删除数据
      $.post('/base/getalldata', { type: 1, time: time }, function (data) {
        if (data.status == 0) {
          var xaxis = [];
          var type1 = [];
          var type2 = [];
          var type3 = [];
          var type4 = [];
          var type5 = [];
          var type6 = [];
          var type7 = [];
          var type8 = [];
          var type9 = [];
          var type10 = [];
          $.each(data.data, function (i, obj) {
            xaxis.push(obj.timename);
            type1.push(obj.type1);
            type2.push(obj.type2);
            type3.push(obj.type3);
            type4.push(obj.type4);
            type5.push(obj.type5);
            type6.push(obj.type6);
            type7.push(obj.type7);
            type8.push(obj.type8);
            type9.push(obj.type9);
            type10.push(obj.type10);

          });
          var posList = [
            'left', 'right', 'top', 'bottom',
            'inside',
            'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
            'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
          ];
          app.configParameters = {
            rotate: {
              min: -90,
              max: 90
            },
            align: {
              options: {
                left: 'left',
                center: 'center',
                right: 'right'
              }
            },
            verticalAlign: {
              options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
              }
            },
            position: {
              options: posList.reduce(function (map, pos) {
                map[pos] = pos;
                return map;
              }, {})
            },
            distance: {
              min: 0,
              max: 100
            }
          };
          app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
              var labelOption = {
                normal: {
                  rotate: app.config.rotate,
                  align: app.config.align,
                  verticalAlign: app.config.verticalAlign,
                  position: app.config.position,
                  distance: app.config.distance
                }
              };
              myChart.setOption({
                series: [{
                  label: labelOption
                }, {
                  label: labelOption
                }, {
                  label: labelOption
                }, {
                  label: labelOption
                }]
              });
            }
          };


          var labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
              name: {
              }
            }
          };

          option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ['订单量', '待服务订单', '售后订单', '完成订单']
            },
            xAxis: [
              {
                type: 'category',
                data: xaxis,
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '订单量',
                min: 0,
                interval: 100,
                axisLabel: {
                  formatter: '{value}单'
                }
              },
              {
                type: 'value',
                name: '订单金额',
                min: 0,
                interval: 100,
                axisLabel: {
                  formatter: '{value}元'
                }
              }
            ],
            series: [
              {
                name: '订单量',
                type: 'bar',
                data: type1
              },
              {
                name: '待服务订单',
                type: 'bar',
                data: type2
              },
              // {
              //   name: '取消订单',
              //   type: 'bar',
              //   data: type3
              // },
              {
                name: '售后订单',
                type: 'bar',
                data: type4
              },
              {
                name: '完成订单',
                type: 'bar',
                data: type5
              }
            ]
          };
          option2 = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ['订单金额', '待服务订单金额', '售后订单金额', '完成订单金额']
            },
            xAxis: [
              {
                type: 'category',
                data: xaxis,
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '',
                min: 0,
                interval: 5000,
                axisLabel: {
                  formatter: '{value}'
                }
              },
              {
                type: 'value',
                name: '订单金额',
                min: 0,
                interval: 5000,
                axisLabel: {
                  formatter: '{value}元'
                }
              }
            ],
            series: [
              {
                name: '订单金额',
                type: 'line',
                data: type6
              },
              {
                name: '待服务订单金额',
                type: 'line',
                data: type7
              },
              // {
              //   name: '取消订单金额',
              //   type: 'line',
              //   data: type8
              // },
              {
                name: '售后订单金额',
                type: 'line',
                data: type9
              },
              {
                name: '完成订单金额',
                type: 'line',
                data: type10
              }
            ]
          };
          if (option && typeof option === 'object') {
            myChart.setOption(option);
          }
          if (option2 && typeof option2 === 'object') {
            myChart2.setOption(option2);
          }
        } else {
          layer.msg(data.msg, { icon: 2, time: 1000 });
        }
      }, 'json');
    </script>
</body> -->
</html>
